<!--  -->
<template>
  <div class="cephalosome">
    <div class="cephalo">
      <ul class="rigt">
        <li
          v-for="(nav, index) in list"
          :key="index"
          :class="{ action: currentIndex === index }"
          @click="changeView(index)"
        >
          {{ nav }}
          <span :class="{ spans: currentIndex === index }"></span>
        </li>
      </ul>
      <div class="lef">
        <el-button type="primary" class="btns">+ 新增线索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentIndex: 0,
      list: ['我的线索', '客商线索库', '线索动态'],
    }
  },
  created() {},
  methods: {
       changeView(index) {
      this.currentIndex = index
        this.$emit('toGo', this.currentIndex=index)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.action {
  color: #2574ff;
}
.cephalosome {
  width: 100%;
  height: 66px;
  .cephalo {
    height: 66px;
    display: flex;
    margin-left: 41px;
    justify-content: space-between;
    align-items: center;
    .rigt {
      height: 66px;
      display: flex;
      list-style: none;
      align-items: center;
      margin: 0;
      li {
        margin: auto 0;
        margin-right: 50px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        .spans {
          position: relative;
          display: block;
          margin: 0 auto;
          width: 41px;
          background: #2574ff;
          height: 3px;
          top: 20px;
        }
      }
    }
    .lef {
      width: 116px;
      height: 42px;
    }
  }
}
</style>
